<template>
  <view class="Bmoney"
    :style="!outStyle ? isTindexs && activeTab === uIndexs ? 'font-size:' + fontSize + 'rpx;' : 'font-size:' + fontSize + 'rpx;color:' + color : outStyle">
    <text :class="!isPirce ? 'Bmoney_isPirce' : ''">¥</text>
    <text :style="{ fontSize: isStylePrice + 'rpx', fontWeight: `bold` }">{{ moneyTap }}</text>
    <text :style="{ fontSize: lastStyle + 'rpx', fontWeight: `bold` }" :class="!isPirce ? 'Bmoney_isPirce' : ''">.{{
      moneyHead }}</text>
    <text v-if="!is_hidden" :class="!isPirce ? 'Bmoney_qi' : ''">起</text>
  </view>
</template>
<script setup lang="ts">
import { ref, toRefs, watch } from 'vue'
import { Money } from '@/hooks'
const { ObjectMoney } = Money()
export interface Props {
  price?: number | string,
  outStyle?: string,
  activeTab?: number,
  isTindexs?: boolean,
  isStylePrice?: string | number,
  lastStyle?: number | string,
  currIndex?: number,
  fontSize?: string | number,
  color?: string,
  isactive?: boolean,
  isPirce?: boolean,
  is_hidden?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  price: '0.00',
  outStyle: '',
  activeTab: 0,
  isTindexs: false,
  isStylePrice: '',
  lastStyle: '',
  currIndex: 0,
  fontSize: 32,
  color: '#000',
  isactive: false,
  isPirce: false,
  is_hidden: false
})

const uIndexs = ref<number>(0)
const moneyTap = ref<number>(0)
const moneyHead = ref<number>(0)
const { price, currIndex, outStyle, activeTab, isStylePrice, color, fontSize } = toRefs(props)
watch(currIndex, (val) => {
  uIndexs.value = val
}, { immediate: true, deep: true })

watch(price, (val) => {
  let obj = ObjectMoney(val)
  if (obj) {
    moneyTap.value = obj[0]
    moneyHead.value = obj[1]
  }
}, { deep: true, immediate: true })

</script>
<style scoped lang="scss">
@import "./BMoney.scss";
</style>